<!-- 专场标题 -->
<template>
    <div class="special-title">
        <div class="specialing">
            <div class="title_left"></div>
            <h2>{{htitle}}</h2>
            <div class="title_right"></div>
        </div>
        <router-link :to="address" class="s-performance">{{specialInfo}}</router-link>
    </div>
</template>

<script lang="ts">
import { getNums } from '@/utils/api';
import { defineComponent } from 'vue';
export default defineComponent({
    props: {
        titleh: Number,
        goodsNum: Number
    },
    data() {
        return {
            htitle: '',
            specialInfo: '',
            address: '',
            nums: 0
        }
    },
    watch: {
        goodsNum(newValue, oldValue) {
            this.specialInfo = `共${this.goodsNum}件在拍拍品`
        },
        nums(newValue, oldValue) {
            if (this.$props.titleh === 1) {
                this.htitle = '拍主专场',
                    this.specialInfo = `共${this.nums}个专场`,
                    this.address = '/special'
            } else if (this.$props.titleh === 2) {
                this.htitle = '最新拍品',
                    this.address = '/online'
            } else {
                this.htitle = '品牌介绍'
            }
        }
    },
    mounted() {
        getNums().then((res) => {
            this.nums = res.data.nums;
            console.log(res);
        }).catch((error) => {
            console.log(error);
        });
    },
});

</script>

<style lang="scss" scoped>
.special-title {
    margin-top: 60px;
    margin-bottom: 40px;
}

.specialing {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 13px;

    .title_left {
        width: 88px;
        height: 22px;
        background: url('@/assets/title_left.png') no-repeat 50%;
    }

    .title_right {
        width: 88px;
        height: 22px;
        background: url('@/assets/title_right.png') no-repeat 50%;
    }
}

h2 {
    margin: 0 17px;
    color: #333;
}

.s-performance {
    color: #993D43;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}
</style>